<template>
	<view style="height: 100vh;">
		<view class="box">
			<view class="info">
				<view class="li">
					<view class="l">
						<view class="name">
							头像
						</view>

						<button type="balanced" class="openBtn" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
							<view class="v">
								点击可更换头像
							</view>
						</button>
					</view>
					<image :src="info.head_pic" class="u-img" mode=""></image>
				</view>

				<view class="li">
					<view class="l">
						<view class="name">
							昵称
						</view>

					</view>
					<view class="r-text" style="font-size: 26rpx;font-weight: 400;">
						<input type="text" v-model="info.nickname" placeholder="未填写昵称" style="width: 100%;border: 0;">
					</view>
				</view>

				<view class="li">
					<view class="l">
						<view class="name">
							真实姓名
						</view>

					</view>
					<view class="r-text" style="font-size: 26rpx;font-weight: 400;">

						<input type="text" v-model="info.real_name" placeholder="未填写姓名" style="width: 100%;border: 0;">
					</view>
				</view>
				<view class="li">
					<view class="l">
						<view class="name">
							手机号
						</view>

					</view>
					<view class="r-text" style="font-size: 26rpx;font-weight: 400;">

						<input type="text" v-model="info.mobile" placeholder="未填写手机号" style="width: 100%;border: 0;">
					</view>
				</view>
				<view class="li">
					<view class="l">
						<view class="name">
							地区
						</view>

					</view>
					<view class="r-text oneline-hide" style="font-size: 26rpx;font-weight: 400;">

						<input type="text" disabled @click="isAddress=true" v-model="info.area" placeholder="未知"
							style="width: 100%;border: 0;">
					</view>
				</view>
				<view class="li">
					<view class="l">
						<view class="name">
							联系地址
						</view>
					</view>
					<view class="r-text oneline-hide" style="font-size: 26rpx;font-weight: 400;">
						<input type="text" v-model="info.address" placeholder="未填写地址" style="width: 100%;border: 0;">
					</view>
				</view>


			</view>
		</view>

		<view class="btn1" @click="submit">
			确定保存
		</view>
		<u-picker :show="isAddress" keyName="name" ref="uPicker" :columns="addressColumns" @confirm="confirm"
			@cancel="isAddress=false" closeOnClickOverlay @close="isAddress=false" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import {
		AddressApi,
		UserApi
	} from '@/api'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				info: {},
				isAddress: false,
				form: {
					province: null, //身份
					city: null, //城市
					district: null, //区
				},
				province_list: [],
				city_list: [],
				district_list: [],
				addressColumns: [],
				columnData: [],
				columnData2: [],
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		async onLoad() {
			try {
				const res = await UserApi.getUserData()
				this.info = res.result
				this.province_list = await this.getAddress(0)
				this.addressColumns.push(this.province_list)
				this.city_list = await this.getAddress(this.province_list[0].id)
				this.columnData.push(this.city_list)
				this.$refs.uPicker.setColumnValues(1, this.columnData[0])
				this.district_list = await this.getAddress(this.city_list[0].id)
				this.columnData2.push(this.district_list)
				this.$refs.uPicker.setColumnValues(2, this.columnData2[0])
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			// 获取微信头像
			onChooseavatar(e) {
				let self = this;
				let avatarUrl = e.detail.avatarUrl;
				uni.showLoading({
					title: '加载中...'
				});
				self.$uploadFile({
					url: avatarUrl
				}, false).then(upload_res => {
					self.info.head_pic = upload_res.result.showUrl
					uni.hideLoading()
				})

			},
			async getAddress(region_id) {
				try {
					const res = await AddressApi.UserRegionList({
						region_id
					})
					return res.result
				} catch (e) {
					//TODO handle the exception
				}
			},
			async changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					const data1 = await this.getAddress(value[0].id)
					this.columnData.splice(0, 1, data1)
					picker.setColumnValues(1, this.columnData[0])
					const data2 = await this.getAddress(data1[0].id)
					this.columnData2.splice(0, 1, data2)
					picker.setColumnValues(2, this.columnData2[0])
					return
				}
				if (columnIndex === 1) {
					const data = await this.getAddress(value[1].id)
					this.columnData2.splice(0, 1, data)
					picker.setColumnValues(2, this.columnData2[0])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.form.province = e.value[0].id
				this.form.city = e.value[1].id
				this.form.district = e.value[2].id
				this.info.area = `${e.value[0].name} ${e.value[1].name} ${e.value[2].name}`
				this.isAddress = false
			},
			async submit() {
				try {
					let {
						head_pic,
						nickname,
						real_name,
						area,
						address
					} = this.info
					const data = {
						head_pic,
						nickname,
						real_name,
						area,
						address
					}
					for (let k in data) {
						if (!data[k]) return this.$showToast('请完善信息')
					}
					const res = await UserApi.saveUserData(data)
					this.$store.commit('user/updateUserInfo', {
						...this.userInfo,
						...data
					})
					this.$showToast(res.msg)
					uni.navigateBack()
				} catch (err) {
					console.log('submit= ', err);
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn1 {
		position: fixed;
		left: 30rpx;
		bottom: calc(30rpx + constant(safe-area-inset-bottom));
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		width: 690rpx;
		height: 88rpx;
		border-radius: 50rpx;
		opacity: 1;
		background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.box {
		height: 200rpx;
		width: 100vw;
		box-sizing: border-box;
		position: relative;



		.info {
			position: absolute;
			left: 30rpx;
			top: 34rpx;
			width: 690rpx;
			border-radius: 12rpx;
			background: #ffffff;
			box-sizing: border-box;
			padding: 24rpx;

			.openBtn {
				border: 0;
				padding: 0;
				background-color: transparent;
			}

			.openBtn::after {
				border: 0;
				padding: 0;
				background-color: transparent;
			}

			.li {
				width: 640rpx;
				height: 155rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #e8e8e8;

				&:last-of-type {
					border-bottom: none;
				}

				.u-img {
					width: 103rpx;
					height: 103rpx;
					border-radius: 50%;
				}

				.r-text {
					flex: 1;
					text-align: right;
				}

				.l {
					display: flex;
					align-items: center;

					.name {
						opacity: 1;
						font-size: 28rpx;
						font-weight: 400;
					}

					.v {
						color: #787878;
						margin-left: 22rpx;
						font-size: 24rpx;
						font-weight: 400;
					}
				}
			}

		}
	}
</style>